<!DOCTYPE html>
<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="content-type">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="on" http-equiv="x-dns-prefetch-control">
    <meta content="no-cache" http-equiv="Cache-Control"/>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="js/swiper.min.js"></script>
    <link href="goodsDetail.css" rel="stylesheet" type="text/css"/>
    <title>商品详情</title>
</head>
<body>
<div class="goodsDetailContianer" id="app" v-cloak>
    <div class="goodsSwip">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <template :key="item.displayOrder" v-for='item in banners'>
                    <div class="swiper-slide"><img :src="imgBaseUrl+item.fileId"></div>
                </template>
            </div>
        </div>
        <div class="pagination"></div>
    </div>
    <div class="goodsDetailTitle">
        <div class="goodsDetailTitle1" id="goodsName">{{goodsName}}</div>
        <div class="goodsDetailTitle2" id="goodsDesc">{{goodsDesc}}</div>
    </div>
    <div class="priceInfo">
        <div class="priceInfoL">
            <div class="offSelPriPublic">统一售价<span>￥{{originPrice}}</span></div>
        </div>
    </div>
    <div class="goodsDetailCon">
        <template :key="item.displayOrder" v-for='item in images'>
            <view>{{imgBaseUrl}}{{item.fileId}}</view>
            <img :src="imgBaseUrl+item.fileId"></img>
        </template>
    </div>
</div>
</body>
</html>
<script type="text/javascript">

    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    var spuId = getUrlParam('spuId');

    var vm = new Vue({
        el: '#app',
        data: {
            goodsName: '',
            goodsDesc: '',
            originPrice: '',
            banners: [],
            images: [],
            imgBaseUrl: '/easygoods/api/file/preview?id='
        },
        created: function () {

        },
        mounted: function () {
            /*
            var goodsSpuID = {
            "spuId":"527290159cea4fb3889c56fc1592bf84"
            };
            var goodsSpuIDJson = JSON.stringify(goodsSpuID);
            */
            $.ajax({
                type: "post",
                url: "/easygoods/api/goods/spu/public",
                contentType: "application/json;charset=UTF-8",
                data: JSON.stringify({
                    spuId: spuId
                }),
                dataType: "json",
                success: function (res) {
                    vm.banners = res.body.banners,
                        vm.goodsName = res.body.goodsName,
                        vm.goodsDesc = res.body.goodsDesc,
                        vm.originPrice = res.body.originPrice,
                        vm.images = res.body.images
                }
            });

        },
        updated: function () {
            vm.initSwiper()
        },
        methods: {
            initSwiper: function () {
                var mySwiper = new Swiper('.swiper-container', {
                    pagination: '.pagination',
                    loop: true,
                    grabCursor: true,
                    paginationClickable: true
                })
            }
        }
    })


</script>